<template>
  <div :class="$style.container" v-loading.fullscreen.lock="loading">
    <el-card>
      <div slot="header">
        <span>订单列表</span>
      </div>
      <el-form :model="searchForm" :inline="true" style="margin-top:10px;margin-bottom:20px;">
        <el-form-item label="订单号:" :label-width="formLabelWidth">
          <el-input v-model="searchForm.orderId" autocomplete="off" clearable></el-input>
        </el-form-item>
        <el-form-item label="名字:" :label-width="formLabelWidth">
          <el-input v-model="searchForm.name" autocomplete="off" clearable></el-input>
        </el-form-item>
        <el-form-item label="下单时间:" :label-width="formLabelWidth">
          <el-date-picker
            v-model="searchForm.date"
            type="daterange"
            align="right"
            unlink-panels
            range-separator="至"
            start-placeholder="开始日期"
            end-placeholder="结束日期"
            :picker-options="pickerOptions2">
          </el-date-picker>
        </el-form-item>
        <el-form-item style="margin-left:50px;">
          <el-button type="primary" @click.stop="handleSearchClick">查询</el-button>
          <el-button type="primary" @click.stop="handleResetClick">重置</el-button>
        </el-form-item>
      </el-form>

      <el-table :data="tableData" stripe style="width: 100%" border>
        <el-table-column label="序号"  type="index"  width="60"></el-table-column>
        <el-table-column prop="orderId" label="订单号" min-width="200">
        </el-table-column>
        <el-table-column prop="price" label="价格" width="80">
        </el-table-column>
        <el-table-column  label="下单时间" min-width="120" >
          <template slot-scope="scope">
            <span>{{new Date(scope.row.createdAt).Format("yyyy-MM-dd hh:mm:ss")}}</span>
          </template>
        </el-table-column>
        <el-table-column label="付款时间" min-width="120">
          <template slot-scope="scope">
            <span>{{new Date(scope.row.updatedAt).Format("yyyy-MM-dd hh:mm:ss")}}</span>
          </template>
        </el-table-column>
        <el-table-column prop="username" label="付款人" min-width="100">
        </el-table-column>
        <el-table-column prop="payMethod" label="付款方式" min-width="100">
          <template slot-scope="scope">
            <span>{{scope.row.payMethod === 'zfbPay' ? '支付宝' : scope.row.payMethod === 'wxPay' ? '微信支付' : '其他方式'}}</span>
          </template>
        </el-table-column>
        <el-table-column>
          <template slot-scope="scope" label="状态">
           <el-button type="text">{{scope.row.status === 0 ? '未支付' : scope.row.status === 1 ? '已支付': ''}}</el-button>
          </template>
        </el-table-column>
      </el-table>

      <!-- 分页 -->
      <PaginationNumber :page="page" @pagination="paginationChange" />
    </el-card>
  </div>
</template>
<script>
export default {
  data() {
    return {
      loading:false,
      pickerOptions2: {
        shortcuts: [{
          text: '最近一周',
          onClick(picker) {
            const end = new Date();
            const start = new Date();
            start.setTime(start.getTime() - 3600 * 1000 * 24 * 7);
            picker.$emit('pick', [start, end]);
          }
        }, {
          text: '最近一个月',
          onClick(picker) {
            const end = new Date();
            const start = new Date();
            start.setTime(start.getTime() - 3600 * 1000 * 24 * 30);
            picker.$emit('pick', [start, end]);
          }
        }, {
          text: '最近三个月',
          onClick(picker) {
            const end = new Date();
            const start = new Date();
            start.setTime(start.getTime() - 3600 * 1000 * 24 * 90);
            picker.$emit('pick', [start, end]);
          }
        }]
      },
      searchForm: {
        date: []
      },
      formLabelWidth: "120px",
      selectData: {},
      tableData: [],
      page: {
        total:0,
        current:1,
        size:10
      }
    };
  },
  created () {
    this.init() 
  },
  methods: {
    async init () {
      try {
        let params = {
          name:this.searchForm.name,
          orderId: this.searchForm.orderId,
          startDate: this.searchForm.date.length > 0 ? new Date(this.searchForm.date[0]) : '',
          endDate: this.searchForm.date.length > 0 ? new Date(this.searchForm.date[1]) : '',
          page: this.page.current,
          size: this.page.size
        }
        this.loading = true
        let res = await this.$http.get(`/order/getOrders`, params)
        this.loading = false
        this.tableData = res.data.data || []
        this.page.total = res.data.count
      } catch(err) {
        console.log('get order list fail:',err)
      }
    },
    // 查询btn
    handleSearchClick () {
      this.init()
    },
    // 分页
    paginationChange(current, size) {
      this.page.current = current;
      this.page.size = size;
      this.init();
    },
    // 重置btn
    handleResetClick() {
      this.searchForm = {
        name: '',
        orderId: '',
        date:[]
      }
      this.init()
    }
  }
};
</script> 
<style lang="scss" module>
.container {
}
</style>